<template>
  <div id="app">
    <header class="_hearder">
      <div class="hh">
       <img src="./assets/logo2.png" alt="">
       <p>网易云音乐</p>
      </div>
    </header>
    <nav>
      <li><router-link to="/">推荐音乐</router-link></li> 
      <li><router-link to="/hot">热歌榜</router-link></li> 
      <li><router-link to="/search">搜索</router-link></li> 
    </nav>
    <hr />
    <router-view @update:currentSong="currentSong = $event" :currentSong="currentSong" :playing="playing" 
     @update:currentPLayList="currentPLayList = $event"/>
    <audio :src="currentSong ? `https://music.163.com/song/media/outer/url?id=${currentSong.id}.mp3`
          : ''" controls style="height: 50px; position: fixed; top: 50px"
          ref="audio"
          autoplay
           @play=" playing = true"
           @pause=" playing = false"
           @timeupdate="currentTime = $event.target.currentTime"
           @durationchange="duration = $event.target.duration"
           @ended="nextSing"
           ></audio>

    <CustomPlay v-if="currentSong" :currentSong="currentSong" :playing="playing" 
    @play-ing="$refs.audio.play()" @pause-ing="$refs.audio.pause()"
     :currentTime="currentTime"
      :duration="duration" @update:currentTime="$refs.audio.currentTime = $event"
      :currentPLayList="currentPLayList" @update:currentSong="currentSong = $event"
      @next_sing="nextSing" @last_sing="lastSing"></CustomPlay>
  </div>
</template>

<script>

import CustomPlay from '@/components/CustomPlay.vue'
export default ({
    components: {
       CustomPlay,
    },
    data: function () {
      return {
        currentSong: null,
        playing: false,
        currentTime: 0,
        duration: 0,
        currentPLayList: [],
      }
    },
    methods: {
         lastSing: function () {
            var currentIndex = this.currentPLayList.findIndex((o) => {
             return o.id === this.currentSong.id;
          });
          console.log(currentIndex);
          var index = currentIndex === this.currentPLayList.length - 10 ? 9 : currentIndex - 1;
          this.currentSong = this.currentPLayList[index];
         },

         nextSing: function () {
           var currentIndex = this.currentPLayList.findIndex((o) => {
             return o.id === this.currentSong.id;
          });
          // console.log(this.currentSong.id)
          // console.log(currentIndex);
          var index = currentIndex === this.currentPLayList.length - 1 ? 0 : currentIndex + 1;
          this.currentSong = this.currentPLayList[index];
         }
       },
    watch: {
    currentPLayList: function (n) {
      this.currentSong = n[0];
    },
  },
})
</script>


<style lang="less">

#app {
  color: #2c3e50;
}
body{
  margin: 0;
  padding: 0;
}
._hearder {
  width: 100%;
  height: 80px;
  background-color: #D43C33;
  p{
    font-size: 20px;
    color: aliceblue;
    margin: 0;
  }
  img {
    width: 25px;
    height: 25px;
  }
}
.hh {
  display: flex;
  padding-top: 27px;
}
hr{
   padding: 0;
   margin-top: -3px;
   margin-bottom: 0;
   border-bottom: 0;
}
nav {
  height: 40px;
  display: flex;
  li{
    flex: 1;
    list-style: none;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    a {
    font-weight: bold;
    text-decoration: none;
    padding-bottom: 8px;
    font-weight: 500;
    color: black;

    &.router-link-exact-active {
      color: #D43C33;
      border-bottom: 3px solid red;
    }
   }
  }
}
  audio {
     display: none
  }
</style>
